<template>
  <div class="page">
    <div class="login-wrapper" >
      <div class="title">账号绑定</div>
      <el-divider></el-divider>
      <!--验证码登录-->
      <div class="login">
        <el-form ref="captchaValidate" :model="captchaValidate" :rules="ruleValidate">
          <el-form-item prop="phone">
            <el-input class="has-prefix" prefix-icon="el-icon-user-solid" v-model="captchaValidate.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item prop="captcha">
            <el-input
              class="has-prefix"
              v-model="captchaValidate.captcha"
              placeholder="请输入验证码"
              prefix-icon="el-icon-lock"
            >
              <el-button slot="append" class="captcha">
                <span v-if="showCode" @click="getCode">获取验证码</span>
                <span v-if="!showCode">{{ second }}s后重发</span>
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" class="submit" @click="handleCaptchaSubmit('captchaValidate')">确认</el-button>
          </el-form-item>
        </el-form>
        <div class="login-wrapper-agreement">
          <el-checkbox v-model="isAgreement">已阅读并同意
            <span style="color:dodgerblue" @click.prevent="goToAgreement('user')">《用户协议》</span>
            和&nbsp;<span style="color:dodgerblue" @click.prevent="goToAgreement('privacy')">《隐私政策》</span>
          </el-checkbox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sendCaptchaByType,firstBindPhone } from "../../project/service/manager";
import {post} from '@/framework/http/request'
export default {
  name: "firstLogin",
  props: {
    platformCode:{
      type: String,
      default: () => {
        return ''
      }
    },
  },
  data(){
    const phoneValidator = (rule, value, callback) => {
      let reg = /^1[3456789][0-9]{9}$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('手机号不合法'))
      }
    }
    return{
      captchaValidate: {},
      ruleValidate: {
        phone: [{required: true, message: '手机号不能为空', trigger: 'blur'},{validator: phoneValidator, trigger: 'blur'}],
        captcha: [{required: true, message: '验证码不能为空', trigger: 'blur'}],
      },
      isAgreement: this.$store.state.isAgreement || false, //是否同意协议
      showCode: true,
      second: 60,
    }
  },
  created(){
    console.log(this.platformCode)
  },
  watch:{
    second(val) {
      if (val === 0) {
        clearInterval(this.interval)
        this.showCode = true
        this.second = 60
      }
    },
  },
  methods:{
    // 获取验证码
    getCode() {
      let reg = /^1[3456789][0-9]{9}$/
      if(reg.test(this.captchaValidate.phone)){
        sendCaptchaByType({phone: this.captchaValidate.phone, type: 'login'}, res=> {})
        this.showCode = false
        this.countDown()
      } else {
        this.$message.error('手机号不合法')
      }
    },
    // 验证码获取倒计时
    countDown() {
      this.interval = setInterval(() => {
        this.second--
      }, 1000)
    },
    // 确定
    handleCaptchaSubmit(name) {
      if(this.isAgreement){
        this.$refs[name].validate(valid=> {
          if(valid){
            this.captchaValidate.platformCode = this.platformCode
            let param = this.captchaValidate
            firstBindPhone(param,data => {
              const { token } = data
              localStorage.setItem('agent_live_web_token', token)
              this.findWithMe()
              this.$router.push('/index')
              this.$message({
                message: '绑定手机号成功',
                type: 'success'
              });
            })
          }
        })
      }else{
        this.$message({
          showClose: true,
          message: '请同意协议',
          type: 'warning'
        });
      }
    },
    findWithMe() {
      post('/api/agent/findWithMe',{},data => {
        console.log(data)
        this.$store.commit('SAVE_USER', data)
        this.$store.dispatch('SAVE_USER_CACHE', data)
      })
    },
    // 跳转到用户协议或者隐私协议
    goToAgreement(type){
      this.$store.commit('IS_AGREEMENT', this.isAgreement)
      //进入用户协议
      if(type == "user"){
        this.$router.push({
          name:"agreement",
          params:{
            type:'用户协议',
          }
        })
      }else{ //进入隐私协议
        this.$router.push({
          name:"agreement",
          params:{
            type:'隐私协议',
          }
        })
      }
    },
  }
}
</script>

<style lang="less" scoped>
.page{
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -70px;

  .title{
    font-size: 20px;
  }

  .login-wrapper {
    width: 480px;
    margin: 0 auto;
    padding: 40px;
    background: #f5f7fa;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    min-height: 320px;

    .login {
      width: 400px;
      margin: 0 auto;

      .el-button--success {
        margin-top: 20px;
        background: #19be6b;
        width: 100%;
        height: 40px;
        font-size: 16px;

        &.hover {
          background: #19be6f;
        }
      }

      .forget-btn-wrapper {
        margin: 10px 0;
        display: flex;
        justify-content: flex-end;
      }
    }

    .login-wrapper-agreement {
      width: 100%;
      display: flex;
      margin-top: 20px;
    }
    .captcha {
      background: #1890ff;
      color: #FFFFFF;
      height: 40px;
    }
    .login-wrapper-footer {
      width: 400px;
      margin: 40px auto 0;
      .or {
        display: flex;
        justify-content: center;
        align-items: center;
        .line {
          height: 1px;
          width: 180px;
          border-top: 0.5px solid #2c3e50;
        }
        .text {
          padding: 0 10px;
        }
      }
      .wx-login {
        text-align: center;
        margin-top: 20px;
        .wx-logo {
          width: 50px;
          height: 50px;
          cursor:pointer;
        }
      }
    }
  }
}

.el-input {
  width: 100%;
}
/deep/ .el-input__inner {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.el-form-item {
  margin-top: 20px;
}
</style>
